﻿<!doctype html>
<html lang="en">
<head>
    <title>three.js canvas - camera - orthographic</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <!-- Three Canvas-->
    <script src="Three.js"></script>
    <script src="Color.js"></script>
    <script src="Vector2.js"></script>
    <script src="Vector3.js"></script>
    <script src="Vector4.js"></script>
    <script src="Frustum.js"></script>
    <script src="Ray.js"></script>
    <script src="Rectangle.js"></script>
    <script src="Math.js"></script>
    <script src="Matrix3.js"></script>
    <script src="Matrix4.js"></script>
    <script src="Object3D.js"></script>
    <script src="Projector.js"></script>
    <script src="Quaternion.js"></script>
    <script src="Vertex.js"></script>
    <script src="Face3.js"></script>
    <script src="Face4.js"></script>
    <script src="UV.js"></script>
    <script src="Geometry.js"></script>
    <script src="Camera.js"></script>
    <script src="OrthographicCamera.js"></script>
    <script src="PerspectiveCamera.js"></script>
    <script src="Light.js"></script>
    <script src="AmbientLight.js"></script>
    <script src="DirectionalLight.js"></script>
    <script src="PointLight.js"></script>
    <script src="Material.js"></script>
    <script src="LineBasicMaterial.js"></script>
    <script src="MeshBasicMaterial.js"></script>
    <script src="MeshDepthMaterial.js"></script>
    <script src="MeshFaceMaterial.js"></script>
    <script src="MeshLambertMaterial.js"></script>
    <script src="MeshNormalMaterial.js"></script>
    <script src="MeshPhongMaterial.js"></script>
    <script src="ParticleBasicMaterial.js"></script>
    <script src="ParticleCanvasMaterial.js"></script>
    <script src="Texture.js"></script>
    <script src="DataTexture.js"></script>
    <script src="Particle.js"></script>
    <script src="Line.js"></script>
    <script src="Mesh.js"></script>
    <script src="Bone.js"></script>
    <script src="Sprite.js"></script>
    <script src="Scene.js"></script>
    <script src="CanvasRenderer.js"></script>
    <script src="RenderableVertex.js"></script>
    <script src="RenderableFace3.js"></script>
    <script src="RenderableFace4.js"></script>
    <script src="RenderableObject.js"></script>
    <script src="RenderableParticle.js"></script>
    <script src="RenderableLine.js"></script>
    <!-- Three Canvas-->
    <!--   EXTRAS_FILES-->
    <script src="ColorUtils.js"></script>
    <script src="GeometryUtils.js"></script>
    <script src="ImageUtils.js"></script>
    <script src="SceneUtils.js"></script>
    <script src="ShaderUtils.js"></script>
    <script src="BufferGeometry.js"></script>
    <script src="Curve.js"></script>
    <script src="CurvePath.js"></script>
    <script src="EventTarget.js"></script>
    <script src="Gyroscope.js"></script>
    <script src="Path.js"></script>
    <script src="Shape.js"></script>
    <script src="TextPath.js"></script>
    <script src="AnimationHandler.js"></script>
    <script src="Animation.js"></script>
    <script src="KeyFrameAnimation.js"></script>
    <script src="CubeCamera.js"></script>
    <script src="CombinedCamera.js"></script>
    <script src="FirstPersonControls.js"></script>
    <script src="PathControls.js"></script>
    <script src="FlyControls.js"></script>
    <script src="RollControls.js"></script>
    <script src="TrackballControls.js"></script>
    <script src="CubeGeometry.js"></script>
    <script src="CylinderGeometry.js"></script>
    <script src="ExtrudeGeometry.js"></script>
    <script src="LatheGeometry.js"></script>
    <script src="PlaneGeometry.js"></script>
    <script src="SphereGeometry.js"></script>
    <script src="TextGeometry.js"></script>
    <script src="TorusGeometry.js"></script>
    <script src="TorusKnotGeometry.js"></script>
    <script src="PolyhedronGeometry.js"></script>
    <script src="IcosahedronGeometry.js"></script>
    <script src="OctahedronGeometry.js"></script>
    <script src="TetrahedronGeometry.js"></script>
    <script src="AxisHelper.js"></script>
    <script src="CameraHelper.js"></script>
    <script src="SubdivisionModifier.js"></script>
    <script src="Loader.js"></script>
    <script src="BinaryLoader.js"></script>
    <script src="ColladaLoader.js"></script>
    <script src="JSONLoader.js"></script>
    <script src="SceneLoader.js"></script>
    <script src="UTF8Loader.js"></script>
    <script src="MarchingCubes.js"></script>
    <script src="LensFlare.js"></script>
    <script src="LensFlarePlugin.js"></script>
    <script src="ShadowMapPlugin.js"></script>
    <script src="SpritePlugin.js"></script>
    <script src="AnaglyphWebGLRenderer.js"></script>
    <script src="CrosseyedWebGLRenderer.js"></script>
    <script src="ShaderFlares.js"></script>
    <script src="ShaderSprite.js"></script>
    <!--   EXTRAS_FILES-->
    <script src="AnimationMorphTarget.js"></script>
    <script src="Clock.js"></script>
    <script src="DOMRenderer.js"></script>
    <script src="Fog.js"></script>
    <script src="FogExp2.js"></script>
    <script src="LOD.js"></script>
    <script src="MorphAnimMesh.js"></script>
    <script src="Object3D.js"></script>
    <script src="ParallaxBarrierWebGLRenderer.js"></script>
    <script src="ParticleDOMMaterial.js"></script>
    <script src="ParticleSystem.js"></script>
    <script src="Ribbon.js"></script>
    <script src="ShaderMaterial.js"></script>
    <script src="SkinnedMesh.js"></script>
    <script src="Spline.js"></script>
    <script src="SpotLight.js"></script>
    <script src="SVGRenderer.js"></script>
    <script src="WebGLRenderer.js"></script>
    <script src="WebGLRenderTarget.js"></script>
    <script src="WebGLRenderTargetCube.js"></script>
    <script src="WebGLShaders.js"></script>

    <script src="Stats.js"></script>
    <script>

        var container, stats;
        var camera, scene, renderer;

        init();
        animate();

        function init() {

            container = document.createElement('div');
            document.body.appendChild(container);

            var info = document.createElement('div');
            info.style.position = 'absolute';
            info.style.top = '10px';
            info.style.width = '100%';
            info.style.textAlign = 'center';
            info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - orthographic view';
            container.appendChild(info);

            camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -2000, 1000);
            camera.position.x = 200;
            camera.position.y = 100;
            camera.position.z = 200;

            scene = new THREE.Scene();

            scene.add(camera);

            // Grid

            var geometry = new THREE.Geometry();
            geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-500, 0, 0)));
            geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(500, 0, 0)));

            for (var i = 0; i <= 20; i++) {

                var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }));
                line.position.z = (i * 50) - 500;
                scene.add(line);

                var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }));
                line.position.x = (i * 50) - 500;
                line.rotation.y = 90 * Math.PI / 180;
                scene.add(line);

            }

            // Cubes

            var geometry = new THREE.CubeGeometry(50, 50, 50);
            var material = new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading, overdraw: true });

            for (var i = 0; i < 100; i++) {

                var cube = new THREE.Mesh(geometry, material);

                cube.scale.y = Math.floor(Math.random() * 2 + 1);

                cube.position.x = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
                cube.position.y = (cube.scale.y * 50) / 2;
                cube.position.z = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;

                scene.add(cube);

            }

            // Lights

            var ambientLight = new THREE.AmbientLight(Math.random() * 0x10);
            scene.add(ambientLight);

            var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;
            directionalLight.position.normalize();
            scene.add(directionalLight);

            var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;
            directionalLight.position.normalize();
            scene.add(directionalLight);

            renderer = new THREE.CanvasRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);

            container.appendChild(renderer.domElement);

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            container.appendChild(stats.domElement);

        }

        //

        function animate() {

            requestAnimationFrame(animate);

            render();
            stats.update();

        }

        function render() {

            var timer = new Date().getTime() * 0.0001;

            camera.position.x = Math.cos(timer) * 200;
            camera.position.z = Math.sin(timer) * 200;
            camera.lookAt(scene.position);

            renderer.render(scene, camera);

        }

    </script>
</body>
</html>
